<template>
    <div class="page-container">
      <el-row justify="space-between">
        <el-row>
            <el-button size="small" type="primary" @click="handleCreate">新建促销品管理</el-button>
            <!-- <el-button size="small" type="warning" @click="handleCreateClaim">新建领用记录</el-button> -->
        </el-row>
      </el-row>
      <div class="table-box">
        <el-table size="small" :data="list">
            <el-table-column label="促销品名称" prop="activityProduct"></el-table-column>
            <el-table-column label="总数" prop="amountNum"></el-table-column>
            <el-table-column label="领用" prop="getNum"></el-table-column>
            <el-table-column label="库存" prop="stock">
                <template #default="scope">
                    {{ scope.row.amountNum - scope.row.getNum }}
                </template>
            </el-table-column>
            <el-table-column label="单位" prop="units"></el-table-column>
            <el-table-column label="服务商" prop="supplierName"></el-table-column>
            <el-table-column label="备注" prop="remark"></el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="280px">
                <template #default="scope">
                    <el-button size="small" @click="edit(scope.row)" link type="primary"><el-icon><ele-Edit /></el-icon>编辑</el-button>
                    <el-button size="small" @click="claim(scope.row)" link type="primary" v-if="(scope.row.amountNum - scope.row.getNum) > 0"><i class="fa fa-gift"></i>领用</el-button>
                    <el-button size="small" @click="checkRecord(scope.row)" link type="primary"><el-icon><ele-Document /></el-icon>查看记录</el-button>
                    <el-button size="small" @click="delRow(scope.row, scope.$index)" link type="primary"><el-icon><ele-Delete /></el-icon>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
      </div>
      <div class="page-block">
            <el-pagination
                v-model:currentPage="search.current"
                v-model:page-size="search.size"
                :page-sizes="[10, 20, 30, 40]"
                :small="true"
                :disabled="false"
                :background="false"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :hide-on-single-page="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
      </div>
      <promotion-create v-model:dialogDrawer="dialogCreate" :is-edit="isEdit" :edit-form="rowForm" @onSubmit="refreshList"></promotion-create>
      <promotion-claim-create v-model:dialogDrawer="dialogClaim" :is-edit="isClaim" :edit-form="rowForm" @onSubmit="refreshList"></promotion-claim-create>
      <promotion-record v-model:dialogDrawer="dialogRecord" v-model:id="rowForm.id"></promotion-record>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import PromotionCreate from '../components/PromotionCreate.vue'
import PromotionClaimCreate from '../components/PromotionClaimCreate.vue'
import PromotionRecord from '../components/PromotionRecord.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '/@/api/commonApi'

export default {
    name: 'PromotionList',
    components: {
        PromotionCreate,
        PromotionClaimCreate,
        PromotionRecord
    },
    setup() {
        const state = reactive({
            list: [],
            search: {
                current: 1,
                size: 10,  
            },
            total: 0,
            dialogCreate: false,
            isEdit: false,
            rowForm: {},
            isClaim: false,
            dialogClaim: false,
            dialogRecord: false
        })
        // 首页列表
        const getList = () => {
            api.actProductList(state.search).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        // 重新加载
        const refreshList = () => {
            state.search.current = 1
            state.search.size = 10
            getList()
        }

        const edit = row => {
            state.rowForm = row
            state.isEdit = true
            state.dialogCreate = true
        }
        const claim = row => {
            state.isClaim = true
            state.rowForm = {
                productId: row.id,
                amount: row.amountNum - row.getNum
            }
            state.dialogClaim = true
        }
        // 条数切换
        const handleSizeChange = e => {
          state.search.size = e
          getList()
        }
        // 页码切换
        const handleCurrentChange = e => {
          state.search.current = e
          getList()
        }
        // 新建促销品
        const handleCreate = () => {
            state.dialogCreate = true
            state.isEdit = false
            state.rowForm = {}
        }
        // 新建领用记录
        const handleCreateClaim = () => {
            state.rowForm = {}
            state.isClaim = false
            state.dialogClaim = true
        }
        // 查看记录
        const checkRecord = (row) => {
            state.rowForm = row
            state.dialogRecord = true
        }
        // 删除
        const delRow = (row, index) => {
            ElMessageBox.confirm(`是否确认删除「${row.activityProduct}」?`, '提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                api.removeProduct({ids: row.id + ''}).then(res => {
                    ElMessage.success('删除成功')
                    getList()
                })
            })
            
        }


        onMounted(() => {
            getList()
        })
        return {
            ...toRefs(state),
            edit,
            claim,
            handleSizeChange,
            handleCurrentChange,
            handleCreate,
            handleCreateClaim,
            checkRecord,
            delRow,
            refreshList,
        }
    }
}
</script>

<style lang="scss" scoped>
.page-container{
    .table-box{
        background: var(--next-color-white);
        margin-top: 10px;
    }
}
</style>